<template>
<div>
  <div class="custom-mapinfo-right-card">
    <div class="cardTop"></div>
    <div class="cardMid">
      <ul>
        <li v-for='(item, index) in showData' :key='index'>
          <span class="right-card-item-icon right-card-item-commity" :class="classNameArr[index]"></span>
          <div class="right-card-item-content">
            <span class="h1 dropMenu">{{item.statisticsName}}</span>
            <span class="p"><b>{{item.statisticsCount}}</b>个</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="cardBot"></div>
  </div>

  <div class="custom-mapinfo-bottom-card">
    <div class="scardTop">
      <div class="searchForm">
        <el-col :span="20">
          <el-input class="keyword" v-model="selectForm.keyword" placeholder="请输入搜索内容"> </el-input>
        </el-col>
        <el-col :span="4">
          <el-button class="search_btn" type="primary" @click="search">&nbsp;</el-button>
        </el-col>
      </div>
    </div>
    <div class="scardBot">
      <div class="custom-seach-item">
        <ul>
          <li :class="curItem === index?'active':''" v-for='(item, index) in searchItem' :key="index" @click="handleSelectItem(index)">
            <p>{{item.name}}</p>
            <img :src="item.img" />
          </li>
        </ul>
      </div>
    </div>
  </div>
  <el-dialog class="special-style"
                    :title="totalName"
                    :visible.sync="dialogFormVisible"
                    :before-close="close">
      <component :is="comName" :detailForm='formData'></component>
  </el-dialog>
</div>
</template>
<script>
import {getApplicationHouse, getApplicationXq, getApplicationLd, getApplicationFw, getApplicationCzf, getApplicationYl} from '@/http/application'
import {getCommunity, getBuilding, getHouse, getRentalHouse, getCourtyard} from '@/http/FangWuGuanLiApi'
import commityForm from '@/views/shizhanyingyong/houseForm/AppFormCommity'
import buildForm from '@/views/shizhanyingyong/houseForm/AppFormBuild'
import houseForm from '@/views/shizhanyingyong/houseForm/AppFormHouse'
import rentalHouseForm from '@/views/shizhanyingyong/houseForm/AppFormRentalHouse'
import courtyardForm from '@/views/shizhanyingyong/houseForm/AppFormCourtyard'
export default {
  components: {commityForm, buildForm, houseForm, rentalHouseForm, courtyardForm},
  props: {
    detailForm: {
      type: Object,
      default: function () {
        return {
        }
      }
    }
  },
  data () {
    return {
      loading: null,
      comName: 'commityForm',
      selectForm: {},
      formData: {},
      showData: [],
      resData: [],
      dialogFormVisible: false,
      dialogTitle: '显示',
      classNameArr: [
        'right-card-item-commity',
        'right-card-item-building',
        'right-card-item-house',
        'right-card-item-retanhouse',
        'right-card-item-conyard'
      ],
      curItem: '',
      searchItem: [
        {img: require('@/assets/application/house/search_icon01_pressed.png'), name: '小区'},
        {img: require('@/assets/application/house/search_icon02_pressed.png'), name: '楼栋'},
        {img: require('@/assets/application/house/search_icon05_pressed.png'), name: '房屋'},
        {img: require('@/assets/application/house/search_icon03_pressed.png'), name: '出租房'},
        {img: require('@/assets/application/house/search_icon04_pressed.png'), name: '院落'}
      ]
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    init () {},
    getData () {
      getApplicationHouse().then(resp => {
        if (resp.code && resp.code === '200') {
          this.showData = resp.data
        }
      })
    },
    search () {
      this.loadData()
      if (this.curItem !== '' && this.selectForm.keyword !== '') {
        this.loadingMast()
      } else {
        this.$message({
          type: 'info',
          message: '请先选择分类并且填写想要搜索的内容！'
        })
      }
    },
    loadingMast () {
      this.loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    },
    loadData () {
      this.resData = []
      if (this.curItem === 0) {
        getApplicationXq(this.selectForm).then(resp => {
          if (resp.code && resp.code === '200') {
            // resp.data = {'offset': 0, 'limit': 30, 'total': 2, 'sortField': 'lastUpdate', 'sortOrder': 'DESC', 'items': [{'id': '589376030889185282', 'name': '平西组小区', 'longitude': 114.091104, 'latitude': 32.148489, 'communityName': null, 'buildingName': null}, {'id': '589376081426354177', 'name': '平西办家属院', 'longitude': 112.091104, 'latitude': 37.148489, 'communityName': null, 'buildingName': null}]}
            resp.data.name = resp.location
            this.resData.push(resp.data)
            this.$emit('transmit', this.resData)
            this.loading.close()
          }
        })
      }
      if (this.curItem === 1) {
        getApplicationLd(this.selectForm).then(resp => {
          if (resp.code && resp.code === '200') {
            resp.data.name = resp.location
            this.resData.push(resp.data)
            this.$emit('transmit', this.resData)
            this.loading.close()
          }
        })
      }
      if (this.curItem === 2) {
        getApplicationFw(this.selectForm).then(resp => {
          if (resp.code && resp.code === '200') {
            resp.data.name = resp.location
            this.resData.push(resp.data)
            this.$emit('transmit', this.resData)
            this.loading.close()
          }
        })
      }
      if (this.curItem === 3) {
        getApplicationCzf(this.selectForm).then(resp => {
          if (resp.code && resp.code === '200') {
            resp.data.name = resp.location
            this.resData.push(resp.data)
            this.$emit('transmit', this.resData)
            this.loading.close()
          }
        })
      }
      if (this.curItem === 4) {
        getApplicationYl(this.selectForm).then(resp => {
          if (resp.code && resp.code === '200') {
            resp.data.name = resp.location
            this.resData.push(resp.data)
            this.$emit('transmit', this.resData)
            this.loading.close()
          }
        })
      }
    },
    handleSelectItem (index) {
      if (this.curItem === index) {
        this.curItem = ''
      } else {
        this.curItem = index
      }
    },
    close () {
      this.dialogFormVisible = false
    },
    dialogShow (data) {
      this.getFormData(data.id, this.curItem)
      this.loadingMast()
    },
    getFormData (id, type) {
      if (type === 0) {
        getCommunity(id).then(resp => {
          if (resp.code && resp.code === '200') {
            this.formData = resp.data
            this.comName = 'commityForm'
            this.loading.close()
            this.dialogFormVisible = true
          }
        })
      }
      if (type === 1) {
        getBuilding(id).then(resp => {
          if (resp.code && resp.code === '200') {
            this.formData = resp.data
            this.comName = 'buildForm'
            this.loading.close()
            this.dialogFormVisible = true
          }
        })
      }
      if (type === 2) {
        getHouse(id).then(resp => {
          if (resp.code && resp.code === '200') {
            this.formData = resp.data
            this.comName = 'houseForm'
            this.loading.close()
            this.dialogFormVisible = true
          }
        })
      }
      if (type === 3) {
        getRentalHouse(id).then(resp => {
          if (resp.code && resp.code === '200') {
            this.formData = resp.data
            this.loading.close()
            this.comName = 'rentalHouseForm'
            this.dialogFormVisible = true
          }
        })
      }
      if (type === 4) {
        getCourtyard(id).then(resp => {
          if (resp.code && resp.code === '200') {
            this.formData = resp.data
            this.loading.close()
            this.comName = 'courtyardForm'
            this.dialogFormVisible = true
          }
        })
      }
    }
  },
  watch: {
    detailForm: {
      handler: function (data) {
        // this.dialogFormVisible = true
        // this.getFormData(data.id, this.curItem)
      },
      deep: true
    }
  },
  computed: {
    totalName: function () {
      let name = ''
      if (this.detailForm.communityName && this.detailForm.buildingName) {
        name = this.detailForm.communityName + '-' + this.detailForm.buildingName + '-' + this.detailForm.name
      } else {
        if (this.detailForm.communityName) {
          name = this.detailForm.communityName + '-' + this.detailForm.name
        } else if (this.detailForm.buildingName) {
          name = this.detailForm.buildingName + '-' + this.detailForm.name
        } else {
          name = this.detailForm.name
        }
      }
      return name
    }
  }
}
</script>
<style scoped>
.custom-mapinfo-right-card li span.right-card-item-building{
  background-image: url(~@/assets/application/house/right_icon01_pressed.png);
}
.custom-mapinfo-right-card li span.right-card-item-house{
  background-image: url(~@/assets/application/house/right_icon02_pressed.png);
}
.custom-mapinfo-right-card li span.right-card-item-retanhouse{
  background-image: url(~@/assets/application/house/right_icon03_pressed.png) ;
}
.custom-mapinfo-right-card li span.right-card-item-conyard{
  background-image: url(~@/assets/application/house/right_icon04_pressed.png) ;
}
.item {
  margin-bottom: 10px
}
</style>
